<template>
  <div v-bind="boxBindProps">
    <!-- 全屏按钮 -->
    <a-icon v-if="fullScreen" class="full-screen-icon" icon="ant-design:fullscreen-outlined" :type="fullScreenIcon" @click="onToggleFullScreen" />
    <div class="html-content" v-if="renderHtml" v-html="text || value" ref="htmlRef"></div>
    <div class="html-content" v-else ref="htmlRef"> {{ text }} </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, ref, watch, unref, computed } from 'vue';
  import { propTypes } from '/@/utils/propTypes';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { useDesign } from '/@/hooks/web/useDesign';

  export default defineComponent({
    name: 'MyRenderHtml',
    // 不将 attrs 的属性绑定到 html 标签上
    inheritAttrs: false,
    components: {
      
    },
    props: {
      value: propTypes.string.def(''),
      text: propTypes.string.def(undefined),
      height: propTypes.string.def('auto'),
      renderHtml: propTypes.bool.def(true),
      minHeight: propTypes.string.def('100px'),
      // 是否显示全屏按钮
      fullScreen: propTypes.bool.def(false),
      // 全屏以后的z-index
      zIndex: propTypes.any.def(999),
    },
    emits: ['change', 'update:value'],
    setup(props, { emit }) {
      const { prefixCls } = useDesign('render-html');

      const attrs = useAttrs();

      // 全屏状态
      const isFullScreen = ref(false);
      const fullScreenIcon = computed(() => (isFullScreen.value ? 'fullscreen-exit' : 'fullscreen'));
      // 外部盒子参数
      const boxBindProps = computed(() => {
        let _props = {
          class: [
            prefixCls,
            'full-screen-parent',
            'auto-height',
            {
              'full-screen': isFullScreen.value,
            },
          ],
          style: {},
        };
        if (isFullScreen.value) {
          _props.style['z-index'] = props.zIndex;
        }
        return _props;
      });

      onMounted(() => {
        
      });


      // 切换全屏状态
      function onToggleFullScreen() {
        isFullScreen.value = !isFullScreen.value;
      }
      

      const getBindValue = Object.assign({}, unref(props), unref(attrs));

      return {
        boxBindProps,
        getBindValue,
        isFullScreen,
        fullScreenIcon,
        onToggleFullScreen,
      };
    },
  });
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-render-html';
  .@{prefix-cls} {
    &.auto-height {
      .html-content {
        padding: 4px;
        border-radius: 8px;
        height: v-bind(height) !important;
        min-height: v-bind(minHeight);
        overflow-y: auto !important;
      }
    }

    /* 全屏样式 */
    &.full-screen-parent {
      position: relative;

      .full-screen-icon {
        opacity: 0;
        color: black;
        width: 20px;
        height: 20px;
        line-height: 24px;
        background-color: white;
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 9;
        cursor: pointer;
        transition: opacity 0.3s;
        padding: 2px 0 0 1.5px;
      }

      &:hover {
        .full-screen-icon {
          opacity: 1;

          &:hover {
            background-color: rgba(255, 255, 255, 0.88);
          }
        }
      }

      &.full-screen {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 8px;
        background-color: #f5f5f5;

        .full-screen-icon {
          top: 12px;
          right: 12px;
        }

        .full-screen-child,
        .html-content {
          height: 100%;
          max-height: 100%;
          min-height: 100%;
        }
      }

      .full-screen-child {
        height: 100%;
      }
    }
    
    .html-content {
      border: 1px solid #ddd;
    }
  }
</style>
